<template>
  <div class="person">
    <a-form-model layout="inline">
      <a-form-model-item>
        <a-button icon="plus" size="large" @click="addPerson">
          新增
        </a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-input-search
          v-model="searchInput"
          placeholder="输入名称"
          enter-button="搜索"
          size="large"
          allowClear
          @search="search"
        />
      </a-form-model-item>
    </a-form-model>

    <a-table class="tabel" :columns="columns" :data-source="source" bordered rowKey="id" :pagination="false">
      <template slot="action" slot-scope="text,record">
        <div class="u-flex u-row-around">
          <a @click="clickEdit(record)">编辑</a>
          <a @click="clickDel(record)">删除</a>
        </div>
      </template>
    </a-table>

    <a-pagination
      class="pagination"
      v-model="page.pageNum"
      :pageSize.sync="page.pageSize"
      :pageSizeOptions="['5','10','15','20']"
      show-size-changer
      :default-current="1"
      :total="total"
      @change="getPersonData"
      @showSizeChange="getPersonData"
    />

    <PersonFormModal :visible.sync="showForm" :formData.sync="personForm" @ok="getPersonData"></PersonFormModal>
  </div>
</template>

<script>
import PersonFormModal from '../../components/home/PersonFormModal'
import {getPersons,delPerson} from "../../api/index";
export default {
  name:"Person",
  data(){
    return {
      showForm:false,
      personForm:null,
      searchInput:"",
      columns:[
        {
          title: '昵称',
          dataIndex: 'userName',
          key: 'userName',
        },
        {
          title: '账号',
          dataIndex: 'accountNumber',
          key: 'accountNumber',
        },
        {
          title: '工厂',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      source:[],
      page:{
        pageNum:1,
        pageSize:5
      },
      total:0,

    }
  },
  components:{
    PersonFormModal
  },
  created(){
    this.getPersonData();
  },
  methods:{
    getPersonData(){
      getPersons({arg:this.searchInput, ...this.page}).then(data =>{
        this.source=data.records;
        this.total=data.total;
      });
    },
    addPerson(){
      this.showForm=true;
      this.personForm=null;
    },
    search(){
      this.page.pageNum=1;
      this.getPersonData();
    },
    clickEdit(record){
      delete record.name;
      delete record.createTime;
      this.personForm=this._.cloneDeep(record);
      this.showForm=true;
    },
    clickDel(record){
      this.$confirm({
        title: '确定删除这条记录?',
        content: '',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk:() =>{
          delPerson(record.id).then(() =>{
            this.$message.success('删除成功');
            this.getPersonData();
          });
          
        }
      });
      
    }
  }
}
</script>
<style lang="scss" scoped>
.person{
  height: 100%;
  .tabel{
    height: calc(100% - 100px);
    margin: 10px;
    overflow-y: scroll;
  }
  .pagination{
    height: 60px;
  }
}
</style>